<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>03_元素属性操作</title>
        <!-- 
            元素属性操作：针对固定属性、附加属性操作
                元素   固定属性---清除：元素是否可用属性【w3c元素出现设置属性】
                      附加属性---清除：表单为主，附加属性checked、disabled...
                prop()          ---功能：与attr类似，附加属性，针对表单，默认选中
                removeProp()    ---功能：与removeAttr类似，附加属性，针对表单，移除选中
         -->
         <script src="../js/jquery-1.11.1.js"></script>
    </head>
    <body>
        <h1>prop()和removeProp()函数使用</h1>
        <!-- 复选框，默认选中   id="myCheckBox"
             三个按钮       id="getProBtn"       获取属性
                           id="setProBtn"       设置属性
                           id="removeProBtn"    移除属性
             弹出显示文字： div id="output"
         -->
         <input type="checkbox" id="myCheckBox" checked/>
         <button id="getProBtn">获取属性</button>
         <button id="setProBtn">设置属性</button>
         <button id="removeProBtn">移除属性</button>
         <div id="output"></div>
         <script>
             /* prop()  点击--获取属性--打印复选框的值
                                       复选框的值是：+变量
                prop("checked")--input元素--checked属性--属性值bool[true,false]
                
                */
             $("#getProBtn").click(function(){
                 // prop()获取元素的附加属性--input中的checked
                 var isChecked=$("#myCheckBox").prop("checked");
                 $("#output").text("复选框的值是："+isChecked);
             });
             $("#setProBtn").click(function(){
                 $("#myCheckBox").prop("checked",false);
                 $("#output").text("复选框的值是：false")
             });
             // removeProp("checked")    取消选中--删除 checked属性
             $("#removeProBtn").click(function(){
                 $("#myCheckBox").removeProp("checked");
                 $("#output").text("复选框的属性已经移除~");
             });
         </script>
    </body>
</html>